<template>
	<view class="pageView" :style="{
		height: pageHeight,
		background: '#F4F4F4'
	}">
		<u-loading-page :loading="orderLoading" bg-color="#e8e8e8"></u-loading-page>
		<u-navbar
			:title="pageTitle"
			@rightClick="rightClick"
			@leftClick="handleLeftClick"
		>
		</u-navbar>
		<view class="pageTop">
			<view class="pageTop-step">
				<view :style="{
					width: stepWidth,
					height: '20rpx',
					background: 'linear-gradient( 270deg, #0165FB 0%, #7AA7EB 100%)',
					borderRadius: '30rpx'
				}"></view>
			</view>
			<view class="pageTop-stepFont">
				<view v-for="(item, index) in fontList" :key="index">{{ item }}</view>
			</view>
		</view>
		<view class="pageTopDetail">
			<image :src="infoData.img_url" class="pageTopDetail-img"></image>
			<view class="pageTopDetail-middle">
				<view class="pageTopDetail-middle-title">{{ infoData.name }}</view>
				<view class="pageTopDetail-middle-warBlock">
					<text class="pageTopDetail-middle-warBlock-fu">¥</text>
					<text class="pageTopDetail-middle-warBlock-priceNum">{{ infoData.price }}</text>
					<text class="pageTopDetail-middle-warBlock-unit">元/次</text>
				</view>
			</view>
			<view class="pageTopDetail-right" @click="handleClickWar">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/warImg.png"></image>
				<view class="pageTopDetail-right-title">注意事项</view>
			</view>
		</view>
		<view class="pageForm">
			<u-form
				labelPosition="left"
				:model="form"
				ref="uForm"
			>
				<u-form-item
					label="就诊医院"
					prop="hospital"
					borderBottom
					ref="item1"
					label-width="100"
					@click="handleChooseHospital"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.hospital=='请选择医院',
								'dataFont': form.hospital!='请选择医院'
							}"
						>{{ form.hospital }}</view>
						<u-icon name="arrow-right" size="10" v-if="!disabled"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="就诊人"
					prop="people"
					borderBottom
					ref="item1"
					label-width="100"
					@click="handleChoosePeople"
					v-if="!disabled"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.people=='请选择就诊人',
								'dataFont': form.people!='请选择就诊人'
							}"
						>{{ form.people }}</view>
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="陪护人"
					prop="peiPeople"
					borderBottom
					ref="item1"
					label-width="100"
					@click="choosePeiPeople"
					v-if="sx == 'ph'"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.peiPeople=='请选择陪诊师' || form.peiPeople=='请选择陪护人',
								'dataFont': form.peiPeople!='请选择陪诊师' && form.peiPeople!='请选择陪护人'
							}"
						>{{ form.peiPeople }}</view>
						<u-icon name="arrow-right" size="10" v-if="!disabled"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="药品类型"
					prop="drugType"
					borderBottom
					ref="item1"
					label-width="100"
					v-if="sx == 'db' && infoData.name == '代取送药'"
				>
					<view style="padding-left: 100rpx;">
						<u-radio-group
							v-model="form.drugType"
							placement="row"
							v-if="!disabled"
						>
							<u-radio
								v-for="(item, index) in drugList"
								:key="index"
								:label="item.name"
								:name="item.value"
								:customStyle="{marginLeft: '8px'}"
							>
							</u-radio>
						</u-radio-group>
						<view v-else class="dataFont" style="text-align: right;">{{ form.drugTypeName }}</view>
					</view>
				</u-form-item>
				<view v-if="sx == 'db' && infoData.name == '代取送药'">
					<view class="shangchuan">需上传处方照片</view>
					<image v-if="!chufang" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/camera.png" class="upLoadImgImg" @click="getChuImg"></image>
					<image :src="chufang" class="upLoadImgImg"></image>
				</view>
				<u-form-item
					label="上传病例"
					prop="bing"
					borderBottom
					ref="item1"
					label-width="100"
					v-if="sx == 'db' && infoData.name == '送取报告'"
					labelPosition="top"
				>
					<view class="ads">上传格式不限、可拍照上传</view>
					<view style="display: flex;align-items: center;flex-wrap: wrap;">
						<image
							class="upImg"
							src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/camera.png"
							@click="getImgUp"
						></image>
						<image style="margin-left: 10rpx;" class="upImg" v-for="(item, index) in upImgArr" :src="item" :key="index"></image>
					</view>
				</u-form-item>
				<u-form-item
					label="期望陪诊日期"
					prop="dateTime"
					borderBottom
					ref="item1"
					label-width="100"
					v-if="disabled && sx !== 'ph'"
				>
					<view class="dataFont" style="text-align: right;">
						{{ form.dateTime }} {{ form.dateTime1 }}-{{ form.dateTime2 }}
					</view>
				</u-form-item>
				<u-form-item
					label="陪护时间"
					prop="dateTime"
					borderBottom
					ref="item1"
					label-width="100"
					v-if="disabled && sx == 'ph'"
				>
					<view class="dataFont" style="text-align: right;">
						{{ form.dateTime1 }}-{{ form.dateTime2 }}
					</view>
				</u-form-item>
				<u-form-item
					:label="dateLabel"
					prop="dateTime"
					borderBottom
					ref="item1"
					label-width="100"
					@click="handleDate"
					v-if="!disabled && sx !== 'ph'"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.dateTime=='请选择日期',
								'dataFont': form.dateTime!='请选择日期'
							}"
						>{{ form.dateTime }}</view>
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					:label="timeLabel"
					prop="dateTime1"
					borderBottom
					ref="item1"
					label-width="100"
					@click="handleDateTime"
					v-if="!disabled"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.dateTime1=='请选择开始时间',
								'dataFont': form.dateTime1!='请选择开始时间'
							}"
						>{{ form.dateTime1 }}</view>
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					:label="timeLabel1"
					prop="dateTime2"
					borderBottom
					ref="item1"
					label-width="100"
					@click="handleDateTime1"
					v-if="!disabled"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.dateTime2=='请选择结束时间',
								'dataFont': form.dateTime2!='请选择结束时间'
							}"
						>{{ form.dateTime2 }}</view>
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="医生专家"
					prop="docotor"
					borderBottom
					ref="item1"
					label-width="65"
					v-if="sx == 'vip'"
					@click="chooseDoctor"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.docotor=='请选择医生专家',
								'dataFont': form.docotor!='请选择医生专家'
							}"
						>{{ form.docotor }}</view>
						<u-icon name="arrow-right" size="10" v-if="!disabled"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="陪诊师"
					prop="peiPeople"
					borderBottom
					ref="item1"
					label-width="65"
					v-if="sx == 'vip'"
					@click="choosePeiPeople"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.peiPeople=='请选择陪诊师',
								'dataFont': form.peiPeople!='请选择陪诊师'
							}"
						>{{ form.peiPeople }}</view>
						<u-icon name="arrow-right" size="10" v-if="!disabled"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="是否邮寄"
					prop="yOrN"
					borderBottom
					ref="item1"
					label-width="120"
					v-if="sx == 'db' && info.name == '代取送药'"
				>
					<view style="padding-left: 100rpx;">
						<u-radio-group
							v-model="form.yOrN"
							placement="row"
							v-if="!disabled"
						>
							<u-radio
								v-for="(item, index) in ynList"
								:key="index"
								:label="item.name"
								:name="item.value"
								:customStyle="{marginLeft: '8px'}"
							>
							</u-radio>
						</u-radio-group>
						<view v-else class="dataFont" style="text-align: right;">{{ form.yOrNName }}</view>
					</view>
				</u-form-item>
				<u-form-item
					:label="addressLable"
					prop="address"
					borderBottom
					ref="item1"
					label-width="120"
					v-if="sx == 'db'"
					@click="chooseAddress"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.address=='请选择收获地',
								'dataFont': form.address!='请选择收获地'
							}"
						>{{ form.address }}</view>
						<u-icon name="arrow-right" size="10" v-if="!disabled"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="是否接送"
					prop="pickUpAndDropOff"
					borderBottom
					ref="item1"
					label-width="65"
					v-if="sx != 'vip' && sx !== 'db' && sx !== 'ph'"
				>
					<u-radio-group
						v-model="form.pickUpAndDropOff"
						placement="row"
						v-if="!disabled"
					>
						<u-radio
							:customStyle="{marginLeft: '6rpx'}"
							v-for="(item, index) in radioList"
							:key="index"
							:label="item.name"
							:name="item.value"
						>
						</u-radio>
					</u-radio-group>
					<view v-else class="dataFont" style="text-align: right;">{{ form.shuttleName }}</view>
				</u-form-item>
				<u-form-item
					label="科室"
					prop="department"
					borderBottom
					ref="item1"
					label-width="100"
					@click="handleChooseDepartment"
					v-if="sx !== 'vip' && sx !== 'db' && sx !== 'ph'"
				>
					<view class="chooseFontBlock">
						<view
							:class="{
								'chooseFont': form.department=='请选择科室',
								'dataFont': form.department!='请选择科室'
							}"
						>{{ form.department }}</view>
						<u-icon name="arrow-right" size="10" v-if="!disabled"></u-icon>
					</view>
				</u-form-item>
				<u-form-item
					label="陪诊师性别"
					prop="sex"
					borderBottom
					ref="item1"
					label-width="100"
					v-if="sx !== 'vip' && sx !== 'db' && sx !== 'ph'"
				>
					<view style="padding-left: 100rpx;">
						<u-radio-group
							v-model="form.sex"
							placement="row"
							v-if="!disabled"
						>
							<u-radio
								v-for="(item, index) in radioSexList"
								:key="index"
								:label="item.name"
								:name="item.value"
								:customStyle="{marginLeft: '8px'}"
							>
							</u-radio>
						</u-radio-group>
						<view v-else class="dataFont" style="text-align: right;">{{ form.sexName }}</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="requirementBlock" v-if="!disabled" :style="{
			position: 'absolute',
			padding: '32rpx',
			width: '622rpx',
			background: '#FFFFFF',
			borderRadius: '24rpx 24rpx 24rpx 24rpx',
			left: '32rpx',
			top: requirementBlockTop
		}">
			<view class="requirementBlock-title">特殊需求</view>
			<u--textarea
			  v-model="remark"
				placeholder="比如：无自行上下楼梯能力等..."
				border="none"
				height="82"
				@input="handleTextareaInput"
			></u--textarea>
			<view class='fontNumblock'>
				<image v-if="!cailiao" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/camera.png" @click="getImg"></image>
				<image :src="cailiao"></image>
				<view class="fontNumblock-fontNum">{{ fontNum }}/300</view>
			</view>
		</view>
		<view class="peopleBlcok" v-if="disabled" :style="{
			position: 'absolute',
			padding: '32rpx',
			width: '622rpx',
			background: '#FFFFFF',
			borderRadius: '24rpx 24rpx 24rpx 24rpx',
			left: '32rpx',
			top: peopleBlcokTop
		}">
			<view class="peopleBlcok-title">就诊人</view>
			<view class="peopleBlcok-user">{{ form.people }}</view>
			<view class="peopleBlcok-block">
				<view>{{ gender|handleGender }}</view>
				<view class="peopleBlcok-block-age">{{ age }}岁</view>
				<view class="peopleBlcok-block-monile">{{ mobile }}</view>
			</view>
		</view>
		<view class="xuBlock" v-if="disabled" :style="{
			position: 'absolute',
			padding: '32rpx',
			width: '622rpx',
			background: '#FFFFFF',
			borderRadius: '24rpx 24rpx 24rpx 24rpx',
			left: '32rpx',
			top: xuBlockTop
		}">
			<view class="xuBlock-title">特殊需求</view>
			<view class="xuBlock-content">无自行上下楼梯能力等...</view>
			<image :src="cailiao"></image>
		</view>
		<view class="orderBlock" v-if="disabled" :style="{
			position: 'absolute',
			padding: '32rpx',
			width: '622rpx',
			background: '#FFFFFF',
			borderRadius: '24rpx 24rpx 24rpx 24rpx',
			left: '32rpx',
			top: orderBlockTop
		}">
			<view class="orderBlock-title">订单信息</view>
			<view class="orderBlockItem">
				<view class="orderBlockItem-kefy">订单编号</view>
				<view class="orderBlockItem-value">{{ orderNo }}</view>
			</view>
			<view class="orderBlockItem">
				<view class="orderBlockItem-kefy">下单时间</view>
				<view class="orderBlockItem-value">{{ orderTime }}</view>
			</view>
		</view>
		<view class="btnBlock" v-if="!disabled" :style="{
			position: 'absolute',
			padding: '32rpx 32rpx 20rpx 32rpx',
			width: '686rpx',
			background: '#FFFFFF',
			top: btnBlockTop,
			background: '#fff'
		}">
			<view class="btnBlock-radioBlock">
				<u-radio-group v-model="sureValue">
					<view class="btnBlock-radioBlock-block">
						<u-radio shape="circle" :name="1"></u-radio>
						<view class="radioLable">我已阅读并同意<text @click="handleClickService">《服务协议》</text></view>
					</view>
				</u-radio-group>
			</view>
			<view class="btnBlock-btn">
				 <button @click="handleCreate">提交并支付¥{{ infoData.price }}</button>
			</view>
		</view>
		<view class="btnBlock1" v-if="disabled" :style="{
			position: 'absolute',
			padding: '32rpx 32rpx 20rpx 32rpx',
			width: '686rpx',
			background: '#FFFFFF',
			top: btnBlock1Top,
			background: '#fff'
		}">
			<view class="btnBlock1-btn">
				 <button @click="handlePay">立即支付¥{{ infoData.price }}</button>
			</view>
		</view>
		<u-popup :show="popupShow" :round="16" closeable @close="handlePopupClose" mode="center">
			<view class="popupBlock">
				<view class="popupBlock-title">注意事项</view>
				<view class="popupBlock-content">{{ infoData.pz_matter }}</view>
				<view class="popupBlock-btnBlock">
					<button @click="handlePopupClose">确认</button>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker
			ref="datetimePicker"
			:show="chooseBlock"
			v-model="dateStr"
			:minDate="dateStr"
			mode="date"
			@confirm="handleConfirmDate"
			@cancel="handleColseDate"
		></u-datetime-picker>
		<u-datetime-picker
			:show="chooseTimeBlock"
			v-model="timeStr"
			mode="time"
			:minHour="minHour"
			:minMinute="minMinute"
			@confirm="handleConfirmTime"
			@cancel="handleColseTime"
		></u-datetime-picker>
		<u-datetime-picker
			:show="chooseTimeBlock1"
			:minHour="minHour1"
			:minMinute="minMinute1"
			:maxHour="maxHour"
			:maxMinute="maxMinute"
			mode="time"
			@confirm="handleConfirmTime1"
			@cancel="handleColseTime1"
		></u-datetime-picker>
	</view>
</template>

<script>
	import { getPzServiceInfo, addOrder, pays, pzOrderDetail, address } from '@/api/common.js'
	import uploadImage from '@/common/ossutil/ossutil/uploadFile.js';
	export default{
		data() {
			return {
				pageTitle: '2小时陪诊',
				disabled: false,
				popupShow: false,
				dateStr: Number(new Date()),
				chooseBlock: false,
				chooseTimeBlock: false,
				chooseTimeBlock1: false,
				orderLoading: false,
				infoData: null,
				stepWidth: '25%',
				fontList: ['填写订单', '在线支付', '专人服务', '服务完成'],
				radioList: [
					{
						name: '包接送',
						value: 1
					},
					{
						name: '只接',
						value: 2
					},
					{
						name: '只送',
						value: 3
					},
					{
						name: '不接送',
						value: 0
					}
				],
				radioSexList: [
					{
						name: '不限',
						value: 2
					},
					{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					}
				],
				drugList: [
					{
						name: '处方药',
						value: 1
					},
					{
						name: '非处方',
						value: 2
					}
				],
				orderNo: '',
				orderTime: '',
				pageHeight: '123vh',
				form: {
					hospital: '请选择医院',
					hospitalId: '',
					people: '请选择就诊人',
					peopleId: '',
					dateTimeNum: '',
					shuttleName: '',
					drugType: 1,
					drugTypeName: '',
					dateTime: '请选择日期',
					dateTime1: '请选择开始时间',
					dateTime2: '请选择结束时间',
					pickUpAndDropOff: 0,
					department: '请选择科室',
					departmentId: '',
					sex: 0,
					sexName: '',
					docotorId: '',
					docotor: '请选择医生专家',
					peiPeople: '请选择陪诊师',
					peiPeopleId: '',
					address: '请选择收获地',
					addressId: '',
					yOrN: 1,
					yOrNName: ''
				},
				remark: '',
				ynList: [
					{
						name: '是',
						value: 1
					},
					{
						name: '否',
						value: 0
					}
				],
				cailiao: '',
				minMinute: '',
				minMinute1: '',
				gender: '',
				age: '',
				minHour: '',
				minHour1: '',
				maxHour: '',
				maxMinute: '',
				mobile: '',
				file: '',
				fontNum: 0,
				sureValue: '',
				backUrl: '',
				sx: '',
				requirementBlockTop: '1382rpx',
				btnBlockTop: '1846rpx',
				peopleBlcokTop: '1179rpx',
				xuBlockTop: '1395rpx',
				orderBlockTop: '1770rpx',
				btnBlock1Top: '2053rpx',
				dateLabel: '期望陪诊日期',
				timeLabel: '陪诊开始时间',
				timeLabel1: '陪诊结束时间',
				addressLable: '目的地(收货地址)',
				chufang: '',
				chuName: '',
				upImgArr: [],
				upImgNameArr: []
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		filters: {
			handleGender(val) {
				if (val == 1) {
					return '男'
				} else {
					return '女'
				}
			}
		},
		onShow() {
			this.getInfoData()
			this.disabled = false
			this.sx = uni.getStorageSync('indexType').sx
			if (this.sx == 'vip') {
				this.requirementBlockTop = '1312rpx'
				this.btnBlockTop = '1778rpx'
				this.pageHeight = '121vh'
			}
			if (this.sx == 'db') {
				this.dateLabel = '服务日期'
				this.timeLabel = '服务开始时间'
				this.timeLabel1 = '服务结束时间'
				this.requirementBlockTop = '1564rpx'
				this.btnBlockTop = '2016rpx'
				this.pageHeight = '130vh'
				if (uni.getStorageSync('addressData') && uni.getStorageSync('addressData').id) {
					this.form.address = uni.getStorageSync('addressData').address
					this.form.addressId = uni.getStorageSync('addressData').id
				} else {
					address().then(res => {
						if(res.code == 200001){
							if (res.data.data.length > 0) {
								this.form.address = res.data.data[0].address
								this.form.addressId = res.data.data[0].id
							} else {
								this.form.address = ''
								this.form.addressId = ''
							}
						}
					})
				}
			}
			if (this.sx == 'ph') {
				this.timeLabel = '陪护开始时间'
				this.timeLabel1 = '陪护截止时间'
				this.requirementBlockTop = '1136rpx'
				this.btnBlockTop = '1604rpx'
				this.pageHeight = '103vh'
			}
			this.backUrl = ''
			this.form.hospital = uni.getStorageSync('hospitalOrderData').name || '请选择医院'
			this.form.hospitalId = uni.getStorageSync('hospitalOrderData').id || 0
			this.form.people = uni.getStorageSync('peopleItem').name || '请选择就诊人'
			this.form.docotor = uni.getStorageSync('doctorData').name || '请选择医生专家'
			this.form.docotorId = uni.getStorageSync('doctorData').id || 0
			this.form.peiPeople = uni.getStorageSync('peiPeopleItem').name || '请选择陪诊师'
			this.form.peiPeopleId = uni.getStorageSync('peiPeopleItem').id || 0
			this.gender = uni.getStorageSync('peopleItem').gender
			this.age = uni.getStorageSync('peopleItem').age
			this.form.peopleId = uni.getStorageSync('peopleItem').id || 0
			this.mobile = uni.getStorageSync('peopleItem').mobile
			this.form.department = uni.getStorageSync('departmentData').name || '请选择科室'
			if (uni.getStorageSync('departmentData') && uni.getStorageSync('departmentData').id) {
				this.form.departmentId = uni.getStorageSync('departmentData').id || 0
			} else if (uni.getStorageSync('doctorData') && uni.getStorageSync('doctorData').department) {
				this.form.departmentId = uni.getStorageSync('doctorData').department.id || 0
			} else {
				this.form.departmentId = 0
			}
			let date = new Date()
			this.minHour = date.getHours() > 10 ? date.getHours() : '0' + date.getHours()
			this.minMinute = date.getMinutes() > 10 ? date.getMinutes() : '0' + date.getMinutes()
			this.timeStr = `${this.minHour}:${this.minMinute}`
			if (uni.getStorageSync('orderItem') && uni.getStorageSync('orderItem').id) {
				this.disabled = uni.getStorageSync('orderItem').disabled
				this.getOrderDetail()
				this.backUrl = uni.getStorageSync('orderItem').url
				if (this.sx == 'vip') {
					this.peopleBlcokTop = '979rpx'
					this.xuBlockTop = '1241rpx'
					this.orderBlockTop = '1617rpx'
					this.btnBlock1Top = '1912rpx'
					this.pageHeight = '126vh'
				}
				if (this.sx == 'pz') {
					this.pageHeight = '135vh'
				}
				if (this.s == 'ph') {
					this.peopleBlcokTop = '976rpx'
					this.xuBlockTop = '1228rpx'
					this.orderBlockTop = '1617rpx'
					this.btnBlock1Top = '1902rpx'
					this.pageHeight = '125vh'
				}
				if (uni.getStorageSync('orderItem').state == 0) {
					this.stepWidth = '50%'
				}
			}
		},
		methods: {
			getOrderDetail() {
				this.orderLoading = true
				pzOrderDetail({
					id: uni.getStorageSync('orderItem').id
				})
				.then(res => {
					const { code, data } = res
					if (code == 200001) {
						this.form.hospital = data.hospital.name
						let date = new Date(Number(data.service_date))
						let year = date.getFullYear()
						let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
						let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
						this.form.dateTime = `${year}-${month}-${day}`
						this.form.dateTime1 = data.service_starttime
						this.form.dateTime2 = data.service_endtime
						this.form.people = data.partner.name
						this.age = data.partner.age
						this.form.remark = data.need
						this.cailiao = data.need_img
						this.mobile = data.partner.mobile
						this.form.department = data.department.name
						this.getInfoData()
						this.infoData.pz_matter = data.pz_matter
						this.orderTime = data.created_at
						this.orderNo = data.order_sn
						let obj = this.radioSexList.find(item => item.value == data.gender)
						this.form.sexName = obj.name
						let obj1 = this.radioList.find(item => item.value == data.send)
						this.form.shuttleName = obj.name
					}
					this.orderLoading = false
				})
				.catch(e => {
					this.orderLoading = false
				})
			},
			handlePay() {
				pays({
					type: 5,
					order_sn: this.orderNo,
					channel: 2
				}).then(res => {
					let obj = res.data.payInfo;
					uni.requestPayment({
					  provider: 'wxpay',
						...obj,
						success: function (res) {
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							uni.removeStorageSync('indexType')
							uni.removeStorageSync('peopleItem')
							uni.removeStorageSync('hospitalOrderData')
							uni.removeStorageSync('departmentData')
							uni.removeStorageSync('orderItem')
							uni.removeStorageSync('doctorData')
							uni.removeStorageSync('peiPeopleItem')
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/serveOrderPage/serveOrderPage'
								})
							}, 2000)
						},
						fail: function (err) {
							uni.showToast({
								title:'取消支付',
								icon:'none'
							})
						}
					})
				})
			},
			handleCreate() {
				if (this.sureValue) {
					this.orderLoading = true
					addOrder({
						service_id: uni.getStorageSync('productDetail').id,
						hospital_id: this.form.hospitalId,
						partner_id: this.form.peopleId,
						service_starttime: this.form.dateTime1,
						service_endtime: this.form.dateTime2,
						department_id: this.form.departmentId,
						service_date: this.form.dateTime,
						address_id: this.form.addressId,
						drug_type: this.form.drugType,
						drug_img: this.chufang,
						send: this.form.yOrN.toString(),
						record_img: this.upImgArr.join(','),
						shuttle: this.form.pickUpAndDropOff,
						gender: this.form.sex,
						need: this.remark,
						doctor_user_id: this.form.docotorId,
						staff_uid: this.form.peiPeopleId,
						need_img: this.cailiao
					}).then(res => {
						const { code, data } = res
						if (code == 200001) {
							this.orderLoading = false
							uni.showToast({
								icon: 'none',
								title: '提交成功'
							})
							this.orderNo = data.order_sn
							let date = new Date()
							let year = date.getFullYear()
							let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
							let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
							let hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
							let min = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
							let second = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
							this.orderTime = `${year}-${month}-${day} ${hour}:${min}:${second}`
							this.disabled = true
							this.pageTitle = '订单确认'
							if (this.sx == 'vip') {
								this.peopleBlcokTop = '1052rpx'
								this.xuBlockTop = '1306rpx'
								this.orderBlockTop = '1680rpx'
								this.btnBlock1Top = '1962rpx'
								this.pageHeight = '129vh'
							}
							if (this.sx == 'pz') {
								this.pageHeight = '135vh'
							}
							if (this.sx == 'db') {
								this.peopleBlcokTop = '1306rpx'
								this.xuBlockTop = '1552rpx'
								this.orderBlockTop = '1918rpx'
								this.btnBlock1Top = '2194rpx'
								this.pageHeight = '142vh'
								let obj2 = this.drugList.find(item => item.value == this.form.drugType)
								this.form.drugName = obj2.name
							}
							this.stepWidth = '50%'
							let obj = this.radioSexList.find(item => item.value == this.form.sex)
							let obj1 = this.radioList.find(item => item.value == this.form.pickUpAndDropOff)
							if (obj) {
								this.form.sexName = obj.name
							}
							if (obj1) {
								this.form.shuttleName = obj1.name
							}
						} else {
							this.orderLoading = false
						}
					})
					.catch(e => {
						this.orderLoading = false
					})
				} else {
					uni.showToast({
						title: '请阅读并同意《服务协议》',
						icon:'none'
					})
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			getInfoData() {
				this.orderLoading = true
				let id = ''
				if (uni.getStorageSync('orderItem') && uni.getStorageSync('orderItem').id) {
					id = uni.getStorageSync('orderItem').service_id
				} else {
					id = uni.getStorageSync('productDetail').id
				}
				getPzServiceInfo({
					id: id
				}).then(res => {
					const { code, data } = res
					if (code == 200001) {
						this.infoData = data
						this.pageTitle = this.infoData.name
						if (this.infoData && this.infoData.name == '送取报告') {
							this.addressLable = '收货地址'
						} else {
							this.addressLable = '目的地(收货地址)'
						}
					}
					this.orderLoading = false
				})
				.catch(e => {
					this.orderLoading = false
				})
			},
			handleClickWar() {
				this.popupShow = true
			},
			handlePopupClose() {
				this.popupShow = false
			},
			handleChooseHospital() {
				if (!this.disabled) {
					uni.navigateTo({
						url: '/pages/hospitalList/hospitalList'
					})
				}
			},
			handleChoosePeople() {
				if (!this.disabled) {
					uni.navigateTo({
						url: '/pages/peopleList/peopleList'
					})
				}
			},
			handleDate() {
				this.chooseBlock = true
			},
			handleDateTime() {
				this.chooseTimeBlock = true
			},
			handleDateTime1() {
				if (this.form.dateTime1 != '请选择开始时间') {
					this.chooseTimeBlock1 = true
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择开始时间'
					})
				}
			},
			handleChooseDepartment() {
				if (!this.disabled) {
					uni.navigateTo({
						url: '/pages/departmentList/departmentList'
					})
				}
			},
			handleClickService() {
				uni.setStorageSync('infoDataPolicy', this.infoData.pz_policy)
				uni.navigateTo({
					url: '/pages/servicePage/servicePage'
				})
			},
			handleTextareaInput(e) {
				if (e.length < 300) {
					this.remark = e
					this.fontNum = e.length
				} else {
					return false
				}
			},
			handleLeftClick() {
				uni.removeStorageSync('peopleItem')
				uni.removeStorageSync('hospitalOrderData')
				uni.removeStorageSync('departmentData')
				uni.removeStorageSync('orderItem')
				uni.removeStorageSync('doctorData')
				uni.removeStorageSync('peiPeopleItem')
				let url = ''
				if (this.backUrl) {
					url = this.backUrl
				} else {
					url = '/pages/productDetail/productDetail'
				}
				uni.navigateTo({
					url: url
				})
			},
			handleConfirmDate(e) {
				const dateObj = new Date(e.value) // 创建Date对象
				const year = dateObj.getFullYear() // 获取年份
				const month = ("0" + (dateObj.getMonth() + 1)).slice(-2) // 获取月份，并补零
				const day = ("0" + dateObj.getDate()).slice(-2) // 获取日期，并补零
				this.form.dateTime =  `${year}-${month}-${day}`
				this.form.dateTimeNum = e.value
				this.chooseBlock = false
			},
			handleColseDate() {
				this.chooseBlock = false
			},
			handleConfirmTime(e) {
				this.form.dateTime1 = e.value
				// maxHour maxMinute
				let timeArr = e.value.split(':')
				let timeNum = Number(timeArr[0]) * 60 + Number(timeArr[1])
				let timeZNum = timeNum + (this.infoData.pz_hour * 60)
				let timeZNumHour = Math.floor(timeZNum / 60)
				let hour = ''
				if (timeZNumHour > 10) {
					if (timeZNumHour <= 23) {
						hour = timeZNumHour
					} else {
						hour = '0' + (timeZNumHour - 23)
					}
				} else {
					hour = '0' + timeZNumHour
				}
				let min = timeZNum % 60 > 10 ? timeZNum % 60 : '0' + (timeZNum % 60)
				if (this.infoData.pz_hour > 0) {
					this.minHour1 = hour
					this.maxHour = hour
					this.minMinute1 = min
					this.maxMinute = min
				} else {
					this.minHour1 = 0
					this.maxHour = 23
					this.minMinute1 = 0
					this.maxMinute = 59
				}
				this.chooseTimeBlock = false
			},
			handleConfirmTime1(e) {
				this.form.dateTime2 = e.value
				this.chooseTimeBlock1 = false
			},
			handleColseTime() {
				this.chooseTimeBlock = false
			},
			handleColseTime1() {
				this.chooseTimeBlock1 = false
			},
			chooseDoctor() {
				if (!this.disabled) {
					uni.navigateTo({
						url: '/pages/hospitalDetail/hospitalDetail'
					})
				}
			},
			getImg() {
				let that = this
				uni.chooseImage({
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					count: 1,
					success: (res)=>{
						let path = res.tempFilePaths[0]
						uploadImage(path,'','wechat/', res => {
							that.cailiao = res.imgUrl
							that.file = res.imgName
						})
					},
					fail:res=>{
						console.log(res,'123456')
					}
				})
			},
			getChuImg() {
				let that = this
				uni.chooseImage({
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					count: 1,
					success: (res)=>{
						let path = res.tempFilePaths[0]
						uploadImage(path,'','wechat/', res => {
							that.chufang = res.imgUrl
							that.chuName = res.imgName
						})
					},
					fail:res=>{
						console.log(res,'123456')
					}
				})
			},
			getImgUp() {
				let that = this
				uni.chooseImage({
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res)=>{
						let path = res.tempFilePaths[0]
						uploadImage(path,'','wechat/', res => {
							that.upImgArr.push(res.imgUrl)
							that.upImgNameArr.push(res.imgName)
						})
					},
					fail:res=>{
						console.log(res,'123456')
					}
				})
			},
			choosePeiPeople() {
				if (!this.disabled) {
					uni.navigateTo({
						url: '/pages/peiPeopleList/peiPeopleList'
					})
				}
			},
			chooseAddress() {
				uni.setStorageSync('addressUrl', '/pages/createOrder/createOrder')
				if (!this.disabled) {
					uni.navigateTo({
						url: '/pages/MyAddress/MyAddress'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		.pageTop{
			width: 750rpx;
			height: 250rpx;
			background: linear-gradient( 4deg, #0165FB 0%, #7AA7EB 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: relative;
			margin-top: 184rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			&-step{
				margin-top: 80rpx;
				width: 678rpx;
				height: 20rpx;
				background: #FFFFFF;
				border-radius: 30px;
				display: flex;
				align-items: center;
				padding: 4rpx;
			}
			&-stepFont{
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-top: 30rpx;
				padding-left: 60rpx;
				padding-right: 60rpx;
				width: 678rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.pageTopDetail{
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			padding: 32rpx;
			width: 622rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			left: 32rpx;
			top: 380rpx;
			&-img{
				width: 188rpx;
				height: 142rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
			&-middle{
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: bold;
					font-size: 36rpx;
					color: #222222;
				}
				&-warBlock{
					display: flex;
					padding-top: 28rpx;
					align-items: flex-end;
					&-fu{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #E5432E;
					}
					&-priceNum{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: bold;
						font-size: 40rpx;
						color: #E5432E;
					}
					&-price{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #E5432E;
					}
					&-unit{
						padding-left: 8rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #222222;
					}
				}
			}
			&-right{
				text-align: center;
				image{
					width: 24rpx;
					height: 24rpx;
				}
				&-title{
					padding-top: 10rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
		.pageForm{
			position: absolute;
			padding: 32rpx;
			width: 622rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			left: 32rpx;
			top: 620rpx;
			.chooseFontBlock{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.chooseFont{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #999999;
					padding-right: 8rpx;
				}
				.dataFont{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #333333;
					padding-right: 8rpx;
				}
			}
		}
		.peopleBlcok{
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #333333;
			}
			&-user{
				padding-top: 32rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;
			}
			&-block{
				display: flex;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #666666;
				&-age{
					padding-left: 18rpx;
				}
				&-monile{
					padding-left: 18rpx;
				}
			}
		}
		.xuBlock{
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #999999;
			}
			&-content{
				width: 538rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 26rpx;
				color: #333333;
				white-space: nowrap; /* 不换行 */
				overflow: hidden; /* 隐藏超出的内容 */
				text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
				padding-top: 24rpx;
			}
			image{
				width: 128rpx;
				height: 128rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-top: 32rpx;
			}
		}
		.orderBlock{
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;
			}
			.orderBlockItem{
				padding-top: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 32rpx;
				padding-right: 32rpx;
				&-kefy{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #999999;
				}
				&-value{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
		.requirementBlock{
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;
			}
			.fontNumblock{
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				image{
					width: 128rpx;
					height: 128rpx
				}
				&-fontNum{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 26rpx;
					color: #A0A0A0;
				}
			}
		}
		.btnBlock1{
			&-btn{
				button{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 686rpx;
					height: 78rpx;
					background: #0165FB;
					border-radius: 68rpx 68rpx 68rpx 68rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
		.btnBlock{
			&-radioBlock{
				&-block{
					display: flex;
					align-items: center;
					.radioLable{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 22rpx;
						color: #666666;
						text{
							color: #E5432E;
						}
					}
				}
			}
			&-btn{
				padding-top: 28rpx;
				button{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 686rpx;
					height: 78rpx;
					background: #0165FB;
					border-radius: 68rpx 68rpx 68rpx 68rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
		.popupBlock{
			width: 468rpx;
			padding: 40rpx;
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-size: 40rpx;
				color: #333333;
				text-align: center;
				font-weight: bold;
			}
			&-content{
				padding-top: 32rpx;
				width: 460rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;
				line-height: 23px;
				text-align: center;
			}
			&-btnBlock{
				display: flex;
				justify-content: center;
				padding-top: 32rpx;
				button{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 240rpx;
					height: 78rpx;
					background: #0165FB;
					border-radius: 68rpx 68rpx 68rpx 68rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	.shangchuan{
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 24rpx;
		color: #666666;
		padding-top: 32rpx;
	}
	.upLoadImgImg{
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 24rpx;
	}
	.ads{
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 26rpx;
		color: #A0A0A0;
	}
	.upImg{
		width: 128rpx;
		height: 128rpx;
		margin-top: 32rpx;
	}
</style>